import styled from '@emotion/styled';
import { Form, Select } from 'antd';
import { t } from 'i18next';
import React from 'react';

const FormSelect = styled(Select)`
	width: 100%;
	.ant-select-selector {
		height: 40px !important;
		background-color: #f6f6f6 !important;
	}
	.ant-select-selection-placeholder {
		line-height: 40px !important;
	}
	.ant-select-selection-item {
		line-height: 40px !important;
	}
	input {
		height: 40px !important;
	}
`;

interface SceneSelectProps {
	list: { id: number; name: string }[];
	label?: string;
	name?: string;
	placeholder?: string;
	error?: string;
	changeSelect: (value: any, options: any) => void;
}

const SceneSelect = (props: SceneSelectProps) => {
	const { list = [], error = '', changeSelect, label = t('business-scenario-selection'), name, placeholder = t('select') } = props;

	return (
		<>
			<Form.Item label={label} name={name} className="form-business-item">
				<FormSelect placeholder={placeholder} onChange={changeSelect} showArrow={true} bordered={false}>
					{list.map(item => {
						return (
							<Select.Option key={item.id} value={item.id}>
								{item.name}
							</Select.Option>
						);
					})}
				</FormSelect>
			</Form.Item>
			{error ? <p className="transfer-error">{error}</p> : undefined}
		</>
	);
};

export default SceneSelect;
